<template>
  <div class="like">
    <div class="title">
      <h3>猜你喜欢</h3>
    </div>
    <div class="content">
      <ul class="left-list">
        <li v-for="item in likes" :key="item.gid">
          <div class="img-box">
            <img :src="item.img.img_url" alt="" />
          </div>
          <div class="text-box">
            <div class="item-name">{{ item.title }}</div>
            <div class="tag">
              <span v-for="(tag, index) in item.goods_properties" :key="index"
                >{{ tag }}<i>|</i></span
              >
            </div>
            <div class="price-box">
              <div class="price">
                <b>￥</b>
                <span>{{ item.normal_price.price }}</span>
                <i>{{ item.normal_price.tag_content }}</i>
                <a>...</a>
              </div>
            </div>
          </div>
          <div class="bg-box" v-if="Object.keys(item.rank_detail).length">
            <img
              src="https://img2.epetbar.com/nowater/2019-12/24/15/f21e0cf044f2fc066ba22850b59a6c3a.png"
              alt=""
            />
            <div class="bg-text">
              <img
                class="king"
                src="https://img2.epetbar.com/nowater/2019-12/24/16/441af4aaab5be5a2ef56822c060c804d.png"
                alt=""
              />
              <span>{{ item.rank_detail.message }}</span>
              <img
                class="arrow"
                src="https://static.epetbar.com/epet_wap_img/index/arrow.png"
                alt=""
              />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    likes: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.like {
  .title {
    padding: 0 10px;
    h3 {
      width: 75px;
      color: #333;
      margin-top: 10px;
      font-weight: 700;
    }
  }
  .content {
    padding-right: 10px;
    display: flex;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        border-radius: 5px;
        background: #fff;
        margin-top: 10px;
        width: 48%;
        margin-left: 10px;
        .img-box {
          padding: 5px;
        }
        .text-box {
          padding: 0 10px;
          .item-name {
            margin-top: 5px;
            font-size: 12px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .tag {
            color: #666;
            font-size: 12px;
            transform: scale(0.84);
            padding: 0 5px;
            // border: 1px solid #666;
            border-radius: 3px;
            display: inline-block;
            position: relative;
            i {
              margin: 0 2px;
            }
            &::before {
              border: 1px solid #666;
              border-radius: 3px;
              position: absolute;
              left: 0;
              top: 0;
              height: 200%;
              width: 200%;
              content: "";
              transform-origin: 0 0;
              transform: scale(0.5);
            }
          }
          .price-box {
            padding-bottom: 5px;
            .price {
              margin-top: 5px;
              b {
                color: #ff5757;
                font-size: 12px;
                font-weight: 700;
              }
              span {
                color: #ff5757;
                font-size: 14px;
                font-weight: 700;
              }
              i {
                display: inline-block;
                background: url(http://static.epetbar.com/epet_wap_img/index/textbg1.png)
                  no-repeat;
                min-width: 50px;
                background-size: 100% 100%;
                margin-left: 2px;
                padding-left: 3px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                color: #fff;
                font-size: 12px;
                transform: scale(0.84);
              }
              a {
                color: #999;
                font-size: 12px;
                font-weight: 700;
                float: right;
              }
            }
          }
        }
        .bg-box {
          position: relative;
          & > img {
            width: 100%;
          }
          .bg-text {
            width: 100%;
            position: absolute;
            top: 10px;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            .king {
              height: 13px;
            }
            span {
              max-width: 70%;
              color: #333;
              font-size: 13px;
              margin: 0 5px;
              font-weight: 700;
            }
            .arrow {
              height: 7px;
            }
          }
        }
      }
    }
  }
}
</style>